import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from "vite-tsconfig-paths";
import { traeBadgePlugin } from 'vite-plugin-trae-solo-badge';
import UnoCSS from 'unocss/vite'

// https://vite.dev/config/
export default defineConfig({
  server: {
    port: 3002
  },
  build: {
    sourcemap: 'hidden',
    rollupOptions: {
      output: {
        manualChunks: {
          // 将 React 相关库分离
          'react-vendor': ['react', 'react-dom'],
          // 将 Ant Design 核心分离
          'antd-core': ['antd/es/config-provider', 'antd/es/theme', 'antd/es/locale'],
          // 将 Ant Design 表单组件分离
          'antd-form': ['antd/es/form', 'antd/es/input', 'antd/es/button', 'antd/es/select'],
          // 将 Ant Design 展示组件分离
          'antd-display': ['antd/es/table', 'antd/es/card', 'antd/es/list', 'antd/es/descriptions'],
          // 将 Ant Design 反馈组件分离
          'antd-feedback': ['antd/es/message', 'antd/es/notification', 'antd/es/modal', 'antd/es/drawer'],
          // 将 Ant Design 布局组件分离
          'antd-layout': ['antd/es/layout', 'antd/es/menu', 'antd/es/breadcrumb', 'antd/es/pagination'],
          // 将 Ant Design 图标和Pro组件分离
          'antd-icons': ['@ant-design/icons', '@ant-design/pro-components'],
          // 将 Ant Design 其他组件分离
          'antd-other': ['antd'],
          // 将路由相关分离
          'router-vendor': ['react-router-dom'],
          // 将工具库分离
          'utils-vendor': ['axios', 'dayjs', 'zustand']
        }
      }
    },
    chunkSizeWarningLimit: 1000
  },
  plugins: [
    UnoCSS(),
    react({
      babel: {
        plugins: [
          'react-dev-locator',
        ],
      },
    }),
    traeBadgePlugin({
      variant: 'dark',
      position: 'bottom-right',
      prodOnly: true,
      clickable: true,
      clickUrl: 'https://www.trae.ai/solo?showJoin=1',
      autoTheme: true,
      autoThemeTarget: '#root'
    }), 
    tsconfigPaths()
  ],
})
